<template>
  <div id="app">
    <div style="width: 100%; height: 180px;" ref="main2"></div>
  </div>
</template>
<script>
export default {
  name: 'columnLineEcharts',
  /*1. Vue扩展 */
  extends: '', // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: '', event: '' }, // model 会使用到 props
  data() {
    return {
      // lineData: [50, 40, 30, 50, 10],
      // barData: [60, 70, 50, 20, 70]
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    this.drawChart();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    initInfo(item) {
      // console.log(item, "itemitemitemitemitem");
      this.drawChart();
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例

      // let myChart = this.$echarts.init(document.getElementById('main2'));
      let myChart = this.$echarts.init(this.$refs.main2);
      console.log(myChart, '666');
      // 指定图表的配置项和数据
      let option = {
        backgroundColor: '',
        grid: {
          top: '5%',
          left: '1%',
          right: '1%',
          bottom: '0',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#FFF',
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
          textStyle: {
            color: '#000'
          },
          axisPointer: {
            type: 'shadow'
          }
        },

        legend: {
          right: 10,
          top: 1,
          orient: 'horizontal',
          data: [
            '全市平均',
            '电子信息产业',
            '装备制造产业',
            '生物医药产业',
            '先进材料产业',
            '新能源汽车产业'
          ],
          textStyle: {
            color: 'auto'
          }
        },
        xAxis: {
          data: [
            '202101',
            '202102',
            '202103',
            '202104',
            '202105',
            '202106',
            '202107',
            '202108',
            '202109',
            '202110',
            '202111',
            '202112',
            '202201',
            '202202',
            '202203',
            '202204',
            '202205',
            '202206',
            '202207',
            '202208',
            '202209',
            '202210',
            '202211',
            '202212',
            '202301',
            '202302',
            '202303',
            '202304',
            '202305(E)',
            '202306(E)',
            '202307(E)'
          ],
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#38BBEE'
              //fontSize: 18
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#8c8c8c'
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          splitLine: {
            show: false
          }
        },
        label: {
          show: false,
          color: '#FFF'
        },
        yAxis: [
          {
            type: 'value',
            name: '',
            position: 'left',
            scale: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#38BBEE'
                //fontSize: 18
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#0A3256'
              }
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0A3256'
              }
            }
          },

          {
            type: 'value',
            name: '',
            scale: true,
            // min: -10,
            // max: 10,
            position: 'right',
            axisLabel: {
              formatter: '{value} %',
              show: true,
              textStyle: {
                color: 'rgba(255, 255, 255,.8)'
                //fontSize: 18
              }
            },

            axisLine: {
              show: false,
              lineStyle: {
                color: '#8c8c8c'
              }
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#888888'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: [
              '110.76 ',
              '110.77 ',
              '109.70 ',
              '107.75 ',
              '105.65 ',
              '108.42 ',
              '107.72 ',
              '103.67 ',
              '105.70 ',
              '104.48 ',
              '105.30 ',
              '106.84 ',
              '102.51 ',
              '106.22 ',
              '104.92 ',
              '96.69 ',
              '101.85 ',
              '105.42 ',
              '104.04 ',
              '104.50 ',
              '102.00 ',
              '101.70 ',
              '102.70 ',
              '101.40 ',
              '95.90 ',
              '106.40 ',
              '105.80 ',
              '107.60 ',
              '104.8',
              '105',
              '104.7'
            ],
            name: '全市平均',
            barWidth: 10,
            yAxisIndex: 0,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },

            color: '#00ECFF'
          },
          {
            type: 'line',
            data: [
              111.59, 109.13, 107.5, 106.49, 105.16, 109.68, 107.73, 105.61, 106.62, 104.6, 107.81,
              108.34, 105.76, 106.15, 109.68, 98.41, 107.28, 107.47, 106.82, 106.35, 108.63, 103.41,
              104.53, 101.21, 98.33, 102.15, 100.61, 104.5, 103.2, 103.8, 103.7
            ],
            name: '电子信息产业',
            barWidth: 10,
            // smooth: true,
            yAxisIndex: 0,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },
            color: '#EC5F74'
          },
          {
            type: 'line',
            data: [
              117.42, 124.09, 108.24, 108.04, 106.47, 109.8, 109.98, 108.63, 106.92, 104.32, 109.82,
              109.04, 107.98, 105.91, 110.12, 97.38, 105.47, 109.18, 108.37, 107.35, 110.96, 111.37,
              106.39, 106.82, 98.19, 111.16, 105.27, 111.89, 107.4, 108.2, 107.2
            ],
            name: '装备制造产业',
            barWidth: 10,
            yAxisIndex: 0,
            // smooth: true,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },
            color: '#56CA95'
          },
          {
            type: 'line',
            data: [
              119.37, 108.99, 112.89, 106.76, 106.45, 114.66, 113.88, 113.32, 115.51, 112.71,
              114.98, 114.12, 109.61, 112.34, 112.8, 108.84, 108.55, 115.33, 115.88, 110.96, 107.51,
              106.72, 106.67, 107.11, 102.35, 110.57, 108.0, 108.03, 102.7, 102.9, 106.3
            ],
            name: '生物医药产业',
            barWidth: 10,
            yAxisIndex: 0,
            // smooth: true,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },
            color: '#FFBA55'
          },
          {
            type: 'line',
            data: [
              105.85, 105.35, 107.32, 103.62, 103.52, 107.28, 105.08, 105.09, 102.15, 101.59,
              108.15, 107.02, 106.45, 105.12, 109.77, 102.44, 106.04, 106.58, 105.97, 104.96,
              108.75, 107.68, 104.17, 104.46, 99.78, 107.36, 105.37, 106.96, 108.2, 109.4, 107.4
            ],
            name: '先进材料产业',
            barWidth: 10,
            yAxisIndex: 0,
            // smooth: true,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },
            color: '#324273'
          },
          {
            type: 'line',
            data: [
              103.59, 106.24, 107.75, 103.53, 108.81, 108.67, 105.96, 101.32, 100.04, 100.63,
              105.63, 104.19, 105.25, 102.76, 106.47, 99.5, 101.96, 103.57, 104.54, 101.52, 108.02,
              108.59, 107.77, 106.05, 106.5, 110.83, 106.67, 109.91, 107.7, 109.8, 110.7
            ],
            name: '新能源汽车产业',
            barWidth: 10,
            yAxisIndex: 0,
            // smooth: true,
            label: {
              show: false,
              position: 'top',
              color: '#FFF',
              fontSize: '14px'
            },
            itemStyle: {
              // borderRadius: [4, 4, 0, 0]
            },
            color: '#7030A0'
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang="scss">
#main2 {
  margin-top: 10px;
}
</style>
